<template>
      <el-popover
    @click.native.stop=""
    placement="bottom-start"
    :transition="transition"
    :visible-arrow="false"
    v-model="showPopover"
    :trigger="trigger">
      <div>
              <div class="novice-wrap">
      <p class="title" v-if="noviceHtml.title" v-html="noviceHtml.title"></p>
      <p class="content" v-if="noviceHtml.text" v-html="noviceHtml.text"></p>
    </div>
    <el-button type="text" class="btn-text fr" @click.stop="checkNovice">{{$t('public.Iknow')}}</el-button>
      </div>
    <!--这里是外面漂浮的圈-->
    <div slot="reference" class="novice-circle-group ">
      <div class="novice-circle4"></div>
      <div class="novice-circle3"></div>
      <div class="novice-circle2"></div>
      <div class="novice-circle1"></div>
      <div data-v-482275ab="" v-if="isDivShow"
      style="
          height: 100px;
          width: 50px;
          position: absolute;
          top: -35px;
          left: -50px;
        "></div>
    </div>
  </el-popover>
</template>

<script>
  // el-popover实现的新手引导组件
    export default {
      name: 'popover-novice',
      data () {
        return {
          showPopover: false   // 控制点击按钮后的展示状态
        }
      },
      props: {
        transition: {type: String, default: '',},
        trigger: {type: String, default: 'hover'},
        isDivShow: {type: Boolean, default: true},
        noviceKey: {type: String, default: ''}, // 传入的key，用于记录点击状态
        noviceHtml: {
          type: Object,
          default: function () {
            return {
              title: '',
              text: ''
            }
          }   // 传入展示内容,title及content
        }
      },
      methods: {
        // 点击确定隐藏提示
        checkNovice () {
          let data = {key: this.noviceKey, status: true}
          this.$store.dispatch('updateGuidance', data).then((resp) => {
            if (resp && resp.success) {
              let noviceObj = this.$getCache('guidance') || {}
              Object.assign(noviceObj, {[data.key]: data.status})
              // 更新缓存中的值，向外抛出点击事件
              this.$updateCache('guidance', noviceObj)
              this.$emit('updateGuidanceSuccess', true)
              this.showPopover = false
            }
          })
        }
      },
      mounted () {
      }
    }
</script>
<style lang="stylus">
.bounce-enter-active {
  animation: bounce-in .5s;
}
.bounce-leave-active {
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  25% {
    transform: scale(1.2);
  }
  50% {
    transform: scale(1);
  }
  75% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
</style>>
<style lang="stylus" scoped>
  @import "../../../assets/common.styl"
  .novice-wrap
    width 265px
    padding 10px 10px 0
    .btn-text
      color $c-main
      cursor pointer
      font-size 12px
      font-weight normal
    .title
      margin-bottom 10px
      font-size 14px
      color $cf-gray0
    .content
      font-size 12px
      color $cf-gray5
  .clearfix:after
    display block
  .novice-circle-group
    cursor pointer  
</style>
